<template>
  <!-- 轮播图 -->
  <div class="home">
    <div>
      <b-carousel
        id="carousel-1"
        v-model="slide"
        :interval="4000"
        controls
        indicators
        background="#ababab"
        img-width="1024"
        img-height="200"
        style="text-shadow: 1px 1px 2px #333;"
        @sliding-start="onSlideStart"
        @sliding-end="onSlideEnd"
      >
        <b-carousel-slide v-for="(img,index) in pu" :key="index" :img-src="img"></b-carousel-slide>
      </b-carousel>
    </div>

    <!-- 搜索框 -->
    <div id="headleft">
      <div id="headleft1">
        <el-input
          placeholder="请输入内容"
          style="width:600px "
          class="input-with-select"
          v-model="search"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click.prevent="searchresults"
            style="  background-color: rgb(160, 190, 117);"
          >
            <router-link :to="'/index/search/'+search" style="color:grey;">搜索</router-link>
          </el-button>
        </el-input>
      </div>
    </div>
    <!-- 首页套餐排行榜 -->
    <div id="body">
      <div id="navtext1">
        <div id="navtext1header">
          <h2>Set Meal List</h2>
          <h3>套餐排行榜</h3>
        </div>
        <div class="container" id="rows">
          <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 box">
              <img src="../assets/images/top1.jpg" class="img" alt />
              <div class="over-layer">
                <h3 class="title">TOP1</h3>
                <h4>垂涎欲滴</h4>
                <div class="description">
                  <p>牛肉萝卜汤</p>
                  <p>肉沫蒸豆腐</p>
                  <p>紫菜蛋花汤</p>
                </div>
                <p>
                  <router-link to="/index/top/mealId/12">详情</router-link>
                </p>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 box">
              <img src="../assets/images/top2.jpg" class="img" alt />
              <div class="over-layer">
                <h3 class="title">TOP2</h3>
                <h4>秀色可餐</h4>
                <div class="description">
                  <p>鲫鱼豆腐汤</p>
                  <p>肉沫蒸豆腐</p>
                  <p>青椒肉丝</p>
                </div>
                <p>
                 <router-link to="/index/top/mealId/13">详情</router-link>>
                </p>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 box">
              <img src="../assets/images/top3.jpg" class="img" alt />
              <div class="over-layer">
                <h3 class="title">TOP3</h3>
                <h4>干脆爽口</h4>
                <div class="description">
                  <p>清蒸鲈鱼</p>
                  <p>肉沫蒸豆腐</p>
                  <p>青椒肉丝</p>
                </div>
                <p>
                  <router-link to="/index/top/mealId/20">详情</router-link>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 首页健康饮食 -->
    <div id="navtext2">
      <div id="navtext2header">
        <h2>Healthy eating habits</h2>
        <h3>健康饮食</h3>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-lg-5 col-md-6 col-sm-12 col-xs-12" id="nav2topone">
            <img src="../assets/images/nav2top1.jpg" alt />
          </div>
          <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12" id="nav2toptwo">
            <h2>维生素</h2>
            <p>复合维生素早饭后吃。研究表明，补充适合自己的复合维生素对身体健康大有裨益。</p>
          </div>
          <div class="col-lg-4 hidden-md hidden-sm col-xs-12" id="nav2topthree">
            <img src="../assets/images/nav2top2.jpg" alt />
          </div>
        </div>
        <div class="row" id="nav2text2bottom">
          <div class="col-lg-3 col-md-6 col-sm-12" id="nav2bottomone">
            <div class="col-lg-12 col-md-12 col-sm-12" id="nav2onefirst">
              <h2>便捷补钙</h2>
              <p>早起的第一件事，就是在杯子里倒满脱脂奶。然后喝掉1/5，再用咖啡把它填满。这样，你就能摄入人体每天所需的25%的维生素D和30%的钙。</p>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12" id="nav2onelast">
              <img src="../assets/images/nav2top3.jpg" alt />
            </div>
          </div>
          <div class="col-lg-6 col-md-6 col-sm-12" id="navefoots">
            <div class="col-lg-12 col-md-12 col-sm-12 col-sm-push-12 col-xs-push-12" id="nav2twofirstnav2twofirst">
              <img src="../assets/images/nav2top4.jpg" alt />
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-sm-pull-12 col-xs-pull-12" id="nav2twolast">
              <h2>水的妙用</h2>
              <p>一大杯水可以帮你稀释体内钠的浓度，让你离高血压远一点。谁也可以排除体内的毒素，让身体更加健康</p>
            </div>
          </div>
          <div class="col-lg-3 hidden-md col-sm-12" id="nav2bottomthree">
            <div class="col-lg-12 col-md-12 col-sm-12" id="nav2threefirst">
              <h2>脂肪保卫</h2>
              <p>研究表明，在一顿饭摄入50—80克脂肪后的几个小时，血管弹性降低，血液凝血因子急剧上升。所以，即使白天吃得很清淡，也不要试图在晚上补偿自己。</p>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12" id="nav2threelast">
              <router-link to="/index/oldpep">更多详情</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      pu: [
        require("../assets/images/indexpic1.jpg"),
        require("../assets/images/indexpic2.jpg"),
        require("../assets/images/indexpic3.jpg")
      ],
      slide: 0,
      sliding: null,
      isMenu: false,
      isOldpep: false,
      search: ""
    };
  },
  methods: {
    onSlideStart(slide) {
      this.sliding = true;
    },
    onSlideEnd(slide) {
      this.sliding = false;
    }
  }
};
</script>
<style lang="css" scoped>

@media(max-width: 500px) {
  #nav2twofirstnav2twofirst {
    display: none !important;
  }
}
@media (min-width: 0px) and (max-width: 750px) {
  #headleft {
    display: none !important;
  }
}
@media (min-width: 500px) and (max-width: 1200px) {
  #nav2topone,
  #nav2toptwo {
    display: block !important;
  }
}
@media (min-width: 750px) and (max-width: 972px) {
  #nav2topthree {
    display: none !important;
  }
}
@media (min-width: 500px) and (max-width: 1200px) {
  #nav2bottomone,
  #navefoots {
    display: block !important;
  }
}
@media (min-width: 750px) and (max-width: 972px) {
  #nav2bottomthree {
    display: none !important;
  }
}
@media (min-width: 500px) and (max-width: 1200px) {
  #nav2onefirst,
  #nav2onelast,
  #nav2twofirstnav2twofirst,
  #nav2twolast,
  #nav2threefirst,
  #nav2threelast {
    display: block !important;
  }
}
.row {
  margin-left: 0px;
  margin-right: 0px;
  /* margin-top:35px; */
}
#headleft {
  width: 40%;
  margin: 0 auto;
  /* border:1px solid #ccc; */
  margin-top:20px;
}

#headleft1 {
  height: 50px;
}

#navtext2 img {
  width: 100%;
  height: 240px;
}

.home {
  width: 100%;
}
.navbar {
  margin-bottom: 0px;
}
.navbar {
  margin-bottom: 0px;
}
#navtext1 {
  width: 100%;
  margin: 0 auto;
}

#natext1bottom {
  width: 100%;
  height: 350px;
}

.box {
  position: relative;
  perspective: 1000px;
}
.box img {
  height: 310px;
  width: 310px;
  opacity: 1;
  margin-left: 60px;
  /*不透明级别*/
  transform: translateY(0) rotateX(0);
  transition: all 0.6s ease-in-out 0s;
}

.box:hover img {
  transform: translateY(-100%) rotateX(90deg);
  transform-origin: bottom center;
  opacity: 0;
}

.box .over-layer {
  position: absolute;
  top: 0;
  width: 310px;
  height: 310px;
  margin-left: 60px;
  opacity: 0;
  background: #333d4b;
  text-align: center;
  transition: all 0.6s ease-in-out 0s;
}

.box:hover .over-layer {
  opacity: 1;
}
.description {
  width: 50%;
  display: block;
  margin: 10px auto 0;
  border-bottom: 1px solid #fff;
  border-top: 1px solid #fff;
}

.over-layer .title {
  padding-top: 40px;
  color: rgb(101, 147, 74);
}
.over-layer p:nth-child(4) {
  padding-top: 20px;
}

.over-layer h4 {
  font-size: 20px;
  font-weight: bolder;
  color: #999;
}

.over-layer p {
  color: #d3d3d3;
}

.over-layer p a {
  text-decoration: none;
  color: #999;
}
.over-layer p a:hover {
  font-weight: bolder;
  color: rgb(101, 147, 74);
}
#rows {
  margin-right: 0px;
  margin-left: 0px;
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1220px;
  }
}
/* top排行榜以及健康饮食的标题 */
#navtext1header,
#navtext2header {
  width: 100%;
  height: 150px;
}

#navtext1header h2,
#navtext1header h3,
#navtext2header h2,
#navtext2header h3 {
  padding-top: 18px;
  text-align: center;
}

#navtext1header h2,
#navtext2header h2 {
  color: rgb(64, 116, 52);
}

#navtext1header h3,
#navtext2header h3 {
  color: grey;
}

#nav2twofirst,
#nav2topone,
#nav2topthree,
#nav2onelast {
  overflow: hidden;
}
#nav2topone img,
#nav2topthree img,
#nav2onelast img,
#nav2twofirst img {
  transition: all 0.5s ease-in-out;
  transform: translate(0%, 0%) scale(1);
}
#nav2topone:hover img,
#nav2topthree:hover img,
#nav2onelast:hover img,
#nav2twofirst:hover img {
  transform: translate(0%, 0%) scale(1.15);
}

#navtext2 {
  clear: both;
  margin: 0 auto;
}

#nav2topone img,
#nav2topthree img,
#nav2onefirst,
#nav2threefirst,
#nav2threelast {
  height: 200px;
}
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 0px;
  padding-left: 0px;
}

#nav2bottomone {
  background-color: #fff;
}

#nav2toptwo h2,
#nav2threefirst h2,
#nav2twolast h2,
#nav2onefirst h2 {
  /* padding-left: 20px; */
  padding-top: 15px;
  color: grey;
  text-align: center;
}

#nav2toptwo p,
#nav2threefirst p,
#nav2twolast p,
#nav2onefirst p {
  color: grey;
  margin: 5px 20px 20px;
  text-align: center;
}
#nav2onefirst p,
#nav2twolast p,
#nav2threefirst p {
  overflow: hidden;
}
#nav2onelast img {
  width: 100%;
  height: 200px;
}

#nav2twofirst img {
  width: 100%;
  height: 300px;
}

#nav2threelast {
  background: url(../assets/images/nav2top5.jpg);
  background-size: 100% 100%;
}
#nav2threelast a {
  display: none;
}
#nav2threelast:hover a {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(90, 90, 90);
  opacity: 0.9;
  text-align: center;
  line-height: 180px;
  color: white;
}
.navbar {
  margin-bottom: 0px;
}
.carousel-indicators {
  z-index:2;
}
</style>